import { WatchSizeStrategyConstType, SizeUpdateHandlerType } from '../SWatchSize'

export const GridResponsivePropsType_Name = 'GridResponsivePropsType'

export type GridResponsivePropsType = {
  // 监听大小变化的策略，默认为 {@link WatchSizeStrategyConst.SELF}
  strategy?: WatchSizeStrategyConstType
  // 宽度变化时的处理函数
  widthUpdateHandler?: SizeUpdateHandlerType
  // 是否组件挂载后立即开启监听，默认为 true
  immediate?: boolean
  // 默认列配置，默认为 1
  colsDefault?: number | string
  // 宫格布局的响应式宽度断点列表，宽度断点从大到小排序，对每个断点的判断都是小于等于该断点时进
  // 行列布局的响应式更新，如果宽度断电列表没传或者为空，则宫格布局默认为 cols 数组的第一个元素
  widthBreakpoints?: number[]
  // 与宽度断点对应的宫格布局列配置列表，如果列配置为数字类型，则列配置为 `repeat(cols[i], 1fr)`，
  // 如果没传或者为空，则宫格布局默认为 colsDefault 指定的列配置，如果 cols 的数组长度小于
  // widthBreakpoints，则长度不足后续的宽度断点的列配置为 `cols[cols.length - 1]`
  clos?: (number | string)[]
  // 列布局发生变化时的处理函数
  colsUpdateHandler?: (cols: number | string) => void
  // 宫格布局的行数，默认为 'auto'
  rows?: number | string
  // 宫格布局的间距，默认为 0，对于数字类型，单位默认为 px
  gap?: number | string
  // 宫格布局的列间距，默认为 0，对于数字类型，单位默认为 px
  colGap?: number | string
  // 宫格布局的行间距，默认为 0，对于数字类型，单位默认为 px
  rowGap?: number | string
}
